import React, { Component } from "react";
import Parment from "./2/parent";
import Child from "./2/child";
import LifeCycle from "./5/模拟生命周期.jsx";
import UseHook from "./7/hoosUse.jsx";
import GetDom from "./9/GetRef.jsx";
import StateT from "./10/Father.jsx";
import AsyncState from "./13/AsyncState.jsx";
import Expose from "./14/expose.jsx";
import Hoc from "./16/Hoc.jsx";
import ComRoute from "./17/index.jsx";
import Route from "./17/index.jsx";
import UseRoute from "./18/index.jsx";
import UseRoutes from "./19/index.jsx";
import RenderProps from "./21/index.jsx";
// import BibaoXianJIng from "./26/index.jsx";
import RenderControl from "./27/index.jsx";

// import RenderProps from "./renderProps.jsx";
// import Bibao from "./闭包陷阱/index.jsx";
class ComUpdate extends Component {
  state = {
    count: 0,
  };
  handleClick = () => {
    // 18: 这部分是异步的，  17：也是异步的
    this.setState({ count: 1 });
    console.log("this.state.count:", this.state.count);
    this.setState({ count: 2 });
    console.log("this.state.count:", this.state.count);
    setTimeout(() => {
      // 18 :这部分是 异步的    17：同步的
      this.setState({ count: 3 });
      console.log("this.state.count:", this.state.count);
      this.setState({ count: 4 });
      console.log("this.state.count:", this.state.count);
    });
  };
  render() {
    return (
      <>
        <h1>react数据更新是同步还是异步</h1>
        <p>count:{this.state.count}</p>
        <button onClick={this.handleClick}>修改count的值</button>
      </>
    );
  }
}
class App extends Component {
  state = {
    num: 1,
  };
  handelC = () => {
    this.setState({
      num: this.state.num + 1,
    });
  };
  render() {
    return (
      <>
        {/* <div>
          <Parment x="123"></Parment>
          <Child child="123"></Child>
        </div> */}
        {/* <div>
          <h1>模拟生命周期</h1>
          <LifeCycle num={this.state.num}></LifeCycle>
        </div> */}
        {/*  <GetDom></GetDom> */}
        {/*  <StateT></StateT> */}
        {/* <AsyncState></AsyncState> */}
        {/* <UseHook></UseHook> */}
        {/* <Father></Father>
        <ComUpdate></ComUpdate> */}
        {/*     <Expose></Expose> */}
        {/*  <Hoc></Hoc> */}
        {/*   <ComRoute></ComRoute> */}
        {/* <UseRoute></UseRoute> */}
        {/*     <UseRoutes></UseRoutes> */}
        {/* <RenderProps></RenderProps> */}
        {/* <BibaoXianJIng></BibaoXianJIng> */}
        <RenderControl></RenderControl>
        {/* <Router></Router> */}
        {/* <RenderProps></RenderProps> */}
        {/* <Bibao></Bibao> */}
      </>
    );
  }
}

export default App;
